<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat dense round icon="menu" area-label="Menu"
               @click="leftDrawerOpen = !leftDrawerOpen" />
        <q-toolbar-title>
          Sonolus
        </q-toolbar-title>
        <q-btn flat round :icon="$q.dark.isActive ? 'brightness_high' : 'brightness_low'" @click="doDarkToggle" />
        <q-btn flat round icon="translate" @click="changeLanguage" />
        <div class="q-ml-sm">{{ data ? data.version : '' }}</div>
      </q-toolbar>
    </q-header>

    <q-drawer v-model="leftDrawerOpen" :width="280" :breakpoint="400">
      <q-scroll-area style="height: calc(100% - 280px); margin-top: 280px; border-right: 1px solid #ddd">
        <q-list padding>
          <q-item v-for="(item, key) in items"
                  :key="key"
                  clickable
                  v-ripple
                  :to="item.name"
                  exact
                  exact-active-class="text-blue">
            <q-item-section avatar>
              <q-icon :name="item.icon" />
            </q-item-section>
            <q-item-section>
              {{ (typeof item.title === 'object') ? getLanguageText(item.title, $i18n.locale) : item.title }}
            </q-item-section>
          </q-item>
        </q-list>
      </q-scroll-area>

      <q-img class="absolute-top"
             style="height: 280px; background: rgb(0, 0, 32)"
             src="icons/icon.png">
        <div class="absolute-bottom bg-black-8">
          <div class="text-weight-bold">Sonolus</div>
          <div class="text-caption">{{ data ? data.version : '' }}</div>
        </div>
      </q-img>
    </q-drawer>

    <q-page-container>
      <router-view/>
    </q-page-container>
  </q-layout>
</template>

<script>
  import {getLanguageText} from "src/lib/Utils";
  export default {
    name: 'MainLayout',
    data: function () {
      return {
        leftDrawerOpen: false
      }
    },
    computed: {
      data: {
        get () {
          return this.$store.state.data;
        },
        set (v) {
          this.$store.commit('updateData', v);
        }
      },
      items: {
        get () {
          if(!this.data || !this.data.content) return [];
          else {
            const list = [];
            console.log(this.data.content);
            for(const i of this.data.content) {
              list.push({
                name: i.name,
                title: i.title,
                icon: i.icon
              });
            }
            return list;
          }
        }
      }
    },
    methods: {
      getLanguageText,
      async doDarkToggle () {
        await this.$q.dark.toggle();
        localStorage.setItem('darkIsActive', this.$q.dark.isActive);
      },
      changeLanguage () {
        this.$q.bottomSheet(
          {
            actions: [
              {
                label: '中文（简体）',
                icon: 'img:flags/cn.svg',
                id: 'zh-cn'
              },
              {
                label: 'English',
                icon: 'img:flags/us.svg',
                id: 'en-us'
              },
              {
                label: '日本語',
                icon: 'img:flags/jp.svg',
                id: 'ja-jp'
              }
            ]
          }
        ).onOk(action => {
          this.$i18n.locale = action.id;
          localStorage.setItem('locale', action.id);
        })
      },
      async getData() {
        try {
          let {data} = await this.$axios.get('https://api.reikohaku.fun/notice/ReiKohaku/notice/master/sonolus_tool_data.json');
          this.data = data;
        } catch {
        }
      }
    },
    async mounted() {
      this.$q.loading.show();

      let isActive = localStorage.getItem('darkIsActive');
      if(!isActive) isActive = true;
      else isActive = (isActive === 'true');
      this.$q.dark.set(isActive);
      await this.getData();

      if(!this.$route.params.name || this.$route.params.name === '')
        if(this.data && this.data.content && this.data.content[0] && this.data.content[0].name)
          await this.$router.push(`/${this.data.content[0].name}`);
      this.$q.loading.hide();
    }
  }
</script>
